<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.精灵图</title>
</head>

<style>
    *{
      margin: 0;
      padding: 0;  
    }
    .box {
        width: 250px;
        margin: 100px auto;
    }

    li {
        list-style-type: none;
    }

    .box li {
        float: left;
        width: 24px;
        height: 24px;
        background-color: #bfa;
        margin:15px;
        background: url(./img/sprite.png);
    }
</style>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    

    <script>
        var li = document.querySelectorAll('li');
        for (var i = 0; i < li.length; i++) {
            var y = -(i * 44);
            li[i].style.backgroundPosition = '0 ' + y + 'px';
        }
    </script>

</body>

</html>